<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>proxy</title>
</head>
<style>
    input{
        width: 200px;
        height: 100px;
        font-size: 50px;
    }
    #res{
        font-size: 50px;
    }
</style>
<body>
<div>
    <input id="in" type="text" />
</div>
<div id="res"></div>
<script>
    var res = document.querySelector("#res")
    let target = res  
    let handler = {
        get(target, key) {
        return target[key]; // 不是target.key
    },
        set(target, key, value) {
            console.log(value)
            target[key] = value;
            update()
            return true
        }
    }

    let proxy = new Proxy(target, handler)
    var input = document.querySelector("#in")
    input.addEventListener("input" , function(){
        proxy.innerHTML = input.value;
    }) 

    function update(){
        var res = document.querySelector("#res")
        res.innerHTML = target.innerText
    }
</script>
</body>
</html>